<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" id="msg" v-model="msg" value="" />
			<br>
			<label>文本{{msg}}</label>
			<br>
			<br>

			<span>多行文本{{msg1}}</span>
			<br>
			<textarea rows="5" cols="10" v-model="msg1"></textarea>
			<br><br>

			<span for="msg2">单个复选框：{{msg2}}</span><br>
			<input type="checkbox" id="checkbox" v-model="msg2" value="a" />

			<p>多个复选框:{{msg3}}</p>
			<span for="msg3checkbox">a</span>
			<input type="checkbox" id="msg3checkbox" v-model="msg3" value="a" /><br>
			<span for="msg3checkbox1">b</span>
			<input type="checkbox" id="msg3checkbox1" v-model="msg3" value="b" /><br>
			<span for="msg3checkbox2">c</span>
			<input type="checkbox" id="msg3checkbox2" v-model="msg3" value="c" />

			<p>单选按钮:{{msg4}}</p>
			<span>One</span>
			<input type="radio" name="radio" id="radio" value="one" v-model="msg4" />
			<span>Two</span>
			<input type="radio" name="radio" id="radio1" value="two" v-model="msg4" />

			<p>选择框:{{select}}</p>
			<select name="select" v-model="select">
				<option disabled="disabled" value="请选择">请选择</option>
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select>
			
		<p>提交：{{$data}}</p>
		<input type="submit" name="sub" id="sub" @click="sub" value="提交" />

		</div>
		<script type="text/javascript">
			var data = {
				msg: "",
				msg1: "",
				msg2: "",
				msg3: [],
				msg4: "",
				select: "",
			}

			var v = new Vue({
				el: "#app",
				data: data,
				methods:{
					sub:function(){
						console.log(this.$data)
					}
				}
			})
		</script>
	</body>
</html>
